<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./dolist.css">
    <title>base</title>
</head>

<body>
    <div class="header">
        <div class="logo">
            <div class="logo_title">
                myToDoList
            </div>
            <div class="logo_input">
                <input type="text" placeholder="请输入日程" class="logo_input_main" id="logo_input_main">
            </div>
        </div>
    </div>
    <div class="body">
        <div class="body_main">
            <div class="body_pre">
                <p class="body_text">正在进行</p>
                <span class="body_num1">0</span>
            </div>
            <ul id="add">
            </ul>
            <div class="body_end">
                <p class="body_text">已经完成</p>
                <span class="body_num2">0</span>
            </div>
            <ul id="end">
            </ul>
        </div>
    </div>
    <div class="footer">
        I CAN ONLY TRY MY BEST
    </div>
    <script src="./template-web.js"></script>
    <script>
        (function () {
            var list = [];

            function contact(msg) {
                var source = template.compile('<li style="position:relative;">' +
                    '<input type="checkbox" class="addbox">' +
                    '<p class="convert">' + '{{content}}' + ' </p>' +
                    '<span class="body_hide">' + '------' + '</span>' + '</li>');
                return source({
                    content: msg
                });
            }

            

            function count() {
                document.getElementsByClassName("body_num1")[0].innerHTML = document.getElementById("add").getElementsByTagName(
                    "li").length;
                document.getElementsByClassName("body_num2")[0].innerHTML = document.getElementById("end").getElementsByTagName(
                    "li").length;
            }

            function createObj(msg) {
                if (msg.replace(/(^s*)|(s*$)/g, "").length != 0) {
                    list.push({
                        "content": msg,
                        "hasDo": false,
                        
                    });
                } else {
                    alert("Please Enter the content");
                }
            }
            function push(msg) {
                list.push({
                        "content": msg,
                    });
            }
            function delObj(msg) {
                for (var i = list.length - 1; i != -1; i--) {
                    if (list[i].content.toString() == msg) {
                        list.splice(i, 1);
                    }
                }
            }

            function changeObj(msg,target) {
                for (var i = 0; i != list.length; i++) {
                    if (list[i].content.toString() == msg) {
                        if (target.parentNode.parentNode.id.toString() == "add") {
                            list[i].hasDo = true;
                        } else {
                            list[i].hasDo = false;
                        }
                    }
                }
            }

           

            function render() {
                var ing = "",
                    finsh = "";
                for (var i = 0; i != list.length; i++) {
                    if (list[i].hasDo == false) {
                            ing = ing + contact(list[i].content);
                    }
                    if (list[i].hasDo == true) {
                            finsh = finsh + contact(list[i].content);
                    }
                }
                document.getElementById("add").innerHTML = ing;
                document.getElementById("end").innerHTML = finsh;
            }

            function extra() {
                render();
                count();
            }

            function bindEvent() {
                var inputtext = document.getElementById("logo_input_main");
                inputtext.addEventListener("keypress", function () {
                    var target = event.target;
                    if (event.keyCode == 13) {
                        createObj(target.value);
                        extra();
                        document.getElementById("logo_input_main").value = "";
                    }
                });
                var dele = document.getElementsByClassName("body_main")[0];
                dele.addEventListener("click", function () {
                    var target = event.target;
                    if (target.nodeName == "SPAN") {
                        var msg = target.parentNode.getElementsByTagName("p")[0].innerText;
                        delObj(msg);
                        extra();
                    } 
                    if (target.nodeName == "INPUT" && target.className == "addbox") {
                            var msg = target.parentNode.getElementsByTagName("p")[0].innerText;
                            var target = event.target;
                            delObj(msg);
                            push(msg);
                            changeObj(msg,target);
                            extra();
                    } 
                })
            }

            function init() {
                bindEvent();
            }
            init();
        })();
    </script>
</body>

</html>